<!--
 * 迭代菜单组件
 * @author lakeside
 * @date 2019-11-04
 * 调用示例：
 *    <el-menu :collapse="isCollapse" :default-active="this.$route.path" menu-trigger="click" router unique-opened>
 *      <iterate-menu :key="subItem.name" :menuItem="subItem" v-for="subItem in navMenu"></iterate-menu>
 *    </el-menu>
-->
<template>
  <el-submenu v-if="menuItem.children && menuItem.children.length&&(menuItem.meta.menu&&!menuItem.meta.menu.hidden)&&!menuItem.meta.container"
        :key="menuItem.name" :index="menuItem.name" >
    <template slot="title">
      <i v-if="menuItem.meta.menu&&menuItem.meta.menu.icon" :class="menuItem.meta.menu.icon"></i>
      <span>{{ menuItem.meta.menu.title }}</span>
    </template>
    <iterate-menu v-for="subItem in menuItem.children" :key="subItem.name" :menuItem="subItem"></iterate-menu>
  </el-submenu>
  <el-menu-item v-else v-show="(menuItem.meta.menu&&!menuItem.meta.menu.hidden)" :key="menuItem.name" :index="menuItem.name"  :route="{path: menuItem.path}">
    <i v-if="menuItem.meta.menu&&menuItem.meta.menu.icon" :class="menuItem.meta.menu.icon"></i>
    <span slot="title">{{ menuItem.meta.menu.title }}</span>
  </el-menu-item>
</template>
<script>
  export default {
    name: 'iterate-menu',
    props:{
      menuItem: { type: Object, default () { return {}; } },
    }
  };
</script>

<style lang="scss" scoped>

</style>